<template>
  <div>
    <div class="bread-crumb">
      <span class="back" @click="goBack">
        <el-icon :size="15.5" style="vertical-align: middle"
          ><ArrowLeft
        /></el-icon>
        返回
      </span>
      <span style="margin: 0 6px">|</span>
      <span> 班级详情 </span>
    </div>
    <el-space fill wrap direction="horizontal" style="width: 100%">
      <el-card shadow="never">
        <div style="font-size: 24px; margin: 0 30px 30px">
          {{ form.name }}
        </div>
        <el-form :model="form" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="授课方式">
                {{
                  {
                    "0": "1v1授课",
                    "1": "班级授课",
                  }[form.isVip]
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联课程">
                {{ form.courseName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授课课时"
                >{{ form.classHour }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="人数/容量"
                >{{ num }}/{{
                  form.plannedStudentCount === 0
                    ? "未设置"
                    : form.plannedStudentCount
                }}</el-form-item
              >
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级分类">
                {{ form.classTypeName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级老师">
                {{ form.teacherName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">{{ form.remark }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card shadow="never">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="排课信息" name="first" v-if="beOver === '1'">
            <CourseScheduling
              :classId="classId"
              :courseFilterIds="courseId"
              :isVip="isVip"
              v-if="activeName === 'first'"
            />
          </el-tab-pane>
          <el-tab-pane
            label="班级学员"
            name="second"
            lazy
            v-if="repair !== '0' && beOver === '1'"
          >
            <Student
              :classId="classId"
              :courseFilterIds="courseId"
              :isVip="isVip"
              @refreshPage="setNum"
              v-if="activeName === 'second'"
            />
          </el-tab-pane>
          <el-tab-pane label="点名情况" name="third" lazy>
            <RollCall
              :classId="classId"
              :classTitle="form.name"
              :courseFilterIds="courseId"
              :isVip="isVip"
              :beOver="beOver"
              v-if="activeName === 'third'"
            />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-space>
  </div>
</template>

<script setup>
import CourseScheduling from "./components/courseScheduling.vue";
import RollCall from "./components/rollCall.vue";
import Student from "./components/student.vue";
import { getClassDetailAPI, getMumberListAPI } from "@/api/registrar/class";

const route = useRoute();
const router = useRouter();
let { classId, tab, repair, beOver } = route.query;
let activeTab = tab || "first";
if (beOver === "0") {
  activeTab = "third";
}

const activeName = ref(activeTab);
const courseId = ref(null);
const num = ref(0); // 班级人数

const data = reactive({
  form: {
    id: undefined,
    name: "",
    plannedStudentCount: 1, // 班级容量
    excess: 0, // 是否可超额
    isVip: null, // 是否一对一课程
    teacherId: null,
    beOver: "1", //结业状态
    classType: null, //班级分类id
    // classTypeName: null, // 班级分类名称
    courseIdArr: [], // 关联课程，多选
    courseId: null, // 关联课程--字符串逗号分隔
    classHour: 0, // 授课课时
    remark: null, // 备注
    courseName: "",
  },
});

const { form } = toRefs(data);
const loading = ref(true);
const isVip = ref(null); // 班级类型/授课方式

function getClassDetail() {
  getClassDetailAPI({ id: classId }).then((response) => {
    form.value = response.data;
    form.value.isVip = response.data.isVip.toString();
    isVip.value = response.data.isVip;
    courseId.value = response.data.courseId;
    form.value.courseIdArr = form.value.courseId
      ? form.value.courseId.split(",")
      : [];
  });
}
function getMumberList() {
  loading.value = true;
  getMumberListAPI({
    classId,
    pageSize: 9999,
    pageNum: 1,
  }).then((response) => {
    num.value = response.rows.length;
    loading.value = false;
  });
}

function setNum(value) {
  num.value = value;
}

function goBack() {
  router.go(-1);
}
getClassDetail();
getMumberList();
</script>

<style lang="scss" scoped>
.bread-crumb {
  margin-left: 16px;
  color: #989898;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 25px;

  .back {
    vertical-align: middle;
    cursor: pointer;
    color: #989898;
    &:hover {
      color: rgb(64, 158, 255);
    }
  }
}
</style>
